![]()
Note:
This page is optimized for print. Try print the invoice and check out the preview. For example, this note will not be visible. |
#12345678 / 20 Jan 2014 |
Company information Apple Inc.1 Infinite LoopCupertino, CA 95014 408.996.1010 e-mail: company@mybiz.com phone: (012) 345-678-901 fax: (012) 678-132-901 |
Client information John DoeBusiness manager at Businesse-mail: john.doe@mybiz.com phone: (012) 345-678-901 fax: (012) 678-132-901 Note: |
No. | Qty | Price | VAT | TAX incl. | |
---|---|---|---|---|---|
1 |
Product name goes hereSize: 3-4 Years Color: Blue Navy |
1 | $1,000.00 | $119.00 | $1,119.00 |
2 |
Product name goes hereSize: 3-4 Years Color: Blue Navy |
1 | $1,000.00 | $119.00 | $1,119.00 |
3 |
Product name goes hereSize: 3-4 Years Color: Blue Navy |
1 | $1,000.00 | $119.00 | $1,119.00 |
4 |
Product name goes hereSize: 3-4 Years Color: Blue Navy |
1 | $1,000.00 | $119.00 | $1,119.00 |
Note:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.
Subtotal: | $1,000.00 |
Delivery: | $5.00 |
VAT: | $119.00 |
Total: | $1,195.95 |
|
<div id="pdfTarget"> <div class="innerAll shop-client-products cart invoice"> <h3 class="separator bottom">Invoice</h3> <table class="table table-invoice"> <tbody> <tr> <td style="width: 58%;"> <div class="media"> <img class="media-object pull-left thumb" src="http://1.s3.envato.com/files/50438174/tf-avatar.jpg" alt="Logo" /> <div class="media-body hidden-print"> <div class="alert alert-primary"> <strong>Note:</strong><br/> This page is optimized for print. Try print the invoice and check out the preview. For example, this note will not be visible. </div> <div class="separator bottom"></div> </div> </div> </td> <td class="right"> <div class="innerL"> <h4 class="separator bottom">#12345678 / 20 Jan 2014</h4> <button type="button" data-toggle="print" class="btn btn-default hidden-print"><i class="fa fa-fw fa-print"></i> Print invoice</button> <button type="button" data-toggle="button-loading pdf" data-target="#pdfTarget" class="btn btn-primary hidden-print"><i class="fa fa-fw fa-download"></i> Save as PDF</button> </div> </td> </tr> </tbody> </table> <div class="box-generic"> <table class="table table-invoice"> <tbody> <tr> <td style="width: 50%;"> <p class="lead">Company information</p> <h2>Apple Inc.</h2> <address class="margin-none"> <strong>1 Infinite Loop</strong><br/> Cupertino, CA 95014<br/> 408.996.1010<br/> <abbr title="Work email">e-mail:</abbr> <a href="mailto:#">company@mybiz.com</a><br /> <abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br/> <abbr title="Work Fax">fax:</abbr> (012) 678-132-901 </address> </td> <td class="right"> <p class="lead">Client information</p> <h2>John Doe</h2> <address class="margin-none"> <strong>Business manager</strong> at <strong><a href="#">Business</a></strong><br> <abbr title="Work email">e-mail:</abbr> <a href="mailto:#">john.doe@mybiz.com</a><br /> <abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br/> <abbr title="Work Fax">fax:</abbr> (012) 678-132-901 <div class="separator line"></div> <p class="margin-none"><strong>Note:</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.</p> </address> </td> </tr> </tbody> </table> </div> <div class="box-generic padding-none"> <table class="table table-vertical-center bg-white margin-none"> <thead class="bg-primary"> <tr> <th style="width: 1%;" class="center">No.</th> <th></th> <th style="width: 50px;">Qty</th> <th style="width: 80px;">Price</th> <th style="width: 80px;">VAT</th> <th style="width: 80px;">TAX incl.</th> </tr> </thead> <tbody> <!-- Cart item --> <tr> <td class="center">1</td> <td> <h5>Product name goes here</h5> Size: <span class="label label-default">3-4 Years</span> Color: <span class="label label-default">Blue Navy</span> </td> <td class="center">1</td> <td class="center">$1,000.00</td> <td class="center">$119.00</td> <td class="center">$1,119.00</td> </tr> <!-- // Cart item END --> <!-- Cart item --> <tr> <td class="center">2</td> <td> <h5>Product name goes here</h5> Size: <span class="label label-default">3-4 Years</span> Color: <span class="label label-default">Blue Navy</span> </td> <td class="center">1</td> <td class="center">$1,000.00</td> <td class="center">$119.00</td> <td class="center">$1,119.00</td> </tr> <!-- // Cart item END --> <!-- Cart item --> <tr> <td class="center">3</td> <td> <h5>Product name goes here</h5> Size: <span class="label label-default">3-4 Years</span> Color: <span class="label label-default">Blue Navy</span> </td> <td class="center">1</td> <td class="center">$1,000.00</td> <td class="center">$119.00</td> <td class="center">$1,119.00</td> </tr> <!-- // Cart item END --> <!-- Cart item --> <tr> <td class="center">4</td> <td> <h5>Product name goes here</h5> Size: <span class="label label-default">3-4 Years</span> Color: <span class="label label-default">Blue Navy</span> </td> <td class="center">1</td> <td class="center">$1,000.00</td> <td class="center">$119.00</td> <td class="center">$1,119.00</td> </tr> <!-- // Cart item END --> </tbody> </table> </div> <!-- Row --> <div class="row"> <!-- Column --> <div class="col-md-5 hidden-print"> <div class="box-generic"> <p class="margin-none"><strong>Note:</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.</p> </div> </div> <!-- Column END --> <!-- Column --> <div class="col-md-4 col-md-offset-3"> <div class="box-generic padding-none"> <table class="table cart_total margin-none"> <tbody> <tr> <td class="right border-top-none">Subtotal:</td> <td class="right border-top-none strong">$1,000.00</td> </tr> <tr> <td class="right">Delivery:</td> <td class="right strong">$5.00</td> </tr> <tr> <td class="right">VAT:</td> <td class="right strong">$119.00</td> </tr> <tr> <td class="right">Total:</td> <td class="right strong">$1,195.95</td> </tr> <tr class="hidden-print"> <td colspan="2"> <div class="innerAll text-center"> <button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-arrow-right"></i> Proceed to Payment</button> </div> </td> </tr> </tbody> </table> </div> </div> <!-- // Column END --> </div> <!-- // Row END --> </div> </div>
@import "assets/components/modules/admin/tables/classic/assets/less/tables.less"; @import "http://localhost/shared/components/modules/admin/invoice/assets/less/invoice.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less"; @import "http://localhost/shared/components/modules/admin/ui/alerts/assets/alerts.less"; @import "assets/components/core/less/labels.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.